<div class="main-section">
    <h1 class="main-section__title">Floating action button</h1>

    <p class="main-section__intro">
        <code>lx-fab</code> is a directive that create a floating action button as described in <a href="https://www.google.com/design/spec/components/buttons-floating-action-button.html" target="_blank">Google guidelines</a>.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/fab/includes/basic.html">
        Two directives need to be transcluded: <code>lx-fab-trigger</code> that transclude the trigger button and <code>lx-fab-actions</code> that transclude the hidden buttons. The trigger button must have <code>xl</code> size and the actions buttons must have <code>l</code> size.
    </lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-direction*</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Define the action buttons direction. Options: <code>up</code>, <code>right</code>, <code>down</code>, <code>left</code></td>
                </tr>
                <tr>
                    <td>lx-trigger-on-click</td>
                    <td><code>boolean</code></td>
                    <td>false</td>
                    <td>Define if the fab actions should be displayed on fab trigger click. If not, fab actions are displayed on fab trigger hover.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>
